<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">
      <el-header>
        <div @click="goback" style="cursor: pointer">
          <el-image
              style="height: 60px; width: 60px; border-radius: 20px; "
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.weite.com%2Ficon%2F8a%2Ff5%2Feb%2F8af5ebc6bcc120376d11dd6920478be1.jpg&refer=http%3A%2F%2Fimg.weite.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642093695&t=044a1321a8b81c401ac6e888708fcbfe"

          ></el-image>
          <span class="header-title">咫尺易市</span>
        </div>
        <div>
          <el-button-group v-if="!user">
            <el-button
                type="text"
                style="color: #eb5a17ec; margin-right: 10px"
                @click="gologin"
            >请先登录</el-button
            >
            <el-button
                type="text"
                style="color: #909399; margin-right: 10px"
                @click="gozhuce"
            >免费注册</el-button
            >
          </el-button-group>
          <el-dropdown @command="commandHandler" class="userInfo" v-if="user">
            <span
                class="el-dropdown-link"
                style="color: #909399; margin-right: 10px; cursor: pointer"
            >
              {{ user.unickName }}<i><img :src="user.userFace" /></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
              <el-dropdown-item command="mygoods">已买的宝贝</el-dropdown-item>
              <el-dropdown-item command="cart">购物车</el-dropdown-item>
              <el-dropdown-item command="logout">注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <router-view />
    </div>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    routes() {
      return this.$store.state.routes;
    },
    user() {
      return this.$store.state.currentUser;
    },
  },
  methods: {
    gologin() {
      this.$router.push("/userlogin");
    },
    gozhuce() {
      this.$router.push("/register");
    },
    gohoutai() {
      this.$router.push("/home");
    },
    commandHandler(command) {
      if (command == "logout") {
        this.$confirm("此操作将注销登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
            .then(() => {
              //注销登录
              this.postRequest("/logout");
              //清空用户session
              window.sessionStorage.removeItem("tokenStr");
              window.sessionStorage.removeItem("user");
              //清空菜单信息
              this.$store.commit("INIT_CURRENTUSER", []);
              //跳转到登录页
              //this.$forceUpdate();
              this.$router.replace("/mainpage");
              location.reload();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消该操作",
              });
            });
      }
      if (command == "userinfo") {
        this.$router.push("/userinfo1");
      }
      if (command == "mygoods") {
        this.$router.push("/userhisorder");
      }
    },
    goback() {
      this.$router.push("/mainpage");
    },
  },

};
</script>

<style>
.el-header {
  background-color: #e4e7ebec;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}

.header-title {
  font-size: 40px;
  font-family: 华文行楷;
  color: #eb5a17ec;
  position: absolute;
  margin-top: 10px;
}
</style>
